<template>
  <div class="address">
    <top-header :isLeft="true" title="地址管理"></top-header>
    <div class="no-address" >
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F00%2F06%2F12575cb9404d5b9.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623200602&t=1daacbde70fcfebd7a2fefc5aa87ea1b" alt="" />
      <div class="no-address-tips">
        <b>没有地址</b>
      </div>
      <p>你还没有常用地址 快去添加一个</p>
    </div>

    <!-- <div class="common-address" v-else>
      <ul>
        <li v-for="(item,index) in commonAddress" :key="index">
          <p>
            <a-tag color="cyan">
              {{labelMap[item.label]}}
               </a-tag>
               {{item.address_location}}{{item.address_doorplate}}
          </p>
          <p>
            {{item.user_name}}
            {{item.user_phone}}
          </p>
        </li>
      </ul>

    </div> -->


    <div class="btn">
      <a-button type="primary" block shape="round" @click="addAddress()">
      <a-icon type="plus" />新建地址
    </a-button>
    </div>
    
  </div>
</template>

<script>
import TopHeader from "../components/ToHeader";
export default {
  name: "Address",
  data() {
    return {
      tempAddress: {
        user_name: "",
        user_phone: "",
        address_location: "",
        address_doorplate: "",
        label: "1",
      },
      labelMap: {},
    };
  },
  computed: {
    commonAddress(){
      return this.$store.getters.commonAddress
    }
  },
  components: {
    TopHeader,
  },
  methods: {
   
    addAddress() {
        //把临时数据保存到vuex中
      //  this.$store.dispatch("setTempAddress",this.tempAddress);
      //把页面推到新建地址的表单页
     this.$router.push({name:"AddAddress"})
    },
  },
//   mounted() {
//     const self=this;
// this.$http.get("/api/labelMap").then(
//   res=>{
//    console.log(res);
//    self.labelMap=res.data.data.data;
    
//   },
//   err=>{

//   }
// )
//   },
};
</script>
<style lang="scss" scoped>
.address {
  width: 100%;
  height: 100%;
  .no-address {
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img{
      height: 170px;
      width: 170px;
    }
    .no-address-tips {
      display: flex;
      justify-content: center;
      font-size: 1.5rem;
      margin: $common-margin;
    }
  }
  .common-address {
    margin-top: $common-margin;
    padding: $common-padding;
    height: 70%;
    background-color: $module-color;
    ul {
      li {
        border-bottom: 1px solid #ccc;
        padding-top: $common-padding;
      }
      li:last-child{
          border-bottom: none;
        }
    }
  }
  .btn {
    padding: $common-padding;
  }
}
</style>
